<template>
  <div class="people">
    <div class="me-box">
      <div class="list clearFix head">
           <b>头像</b>
           <div class="fc">
             <form enctype="multipart/form-data" style="width:5rem;">
               <span class="photo-box">
                 <img class="icon" :src="photoUrl">
                 <input name="avatar" type="file" placeholder="请选择上传图片" id="photoImgUpload" style="margin-left:-.35rem; margin-top:.25rem; " />
               </span>
             </form>
           </div>
           <div class="fr">
               <span class="ico-r"></span>
           </div>
      </div>
      <ul class="list my-list">
        <li class="clearFix" >
          <b>名字</b>
          <div class="fr">
            <span ><input type="text" class="name" placeholder="名字" v-model="people.firstname" id="userName"></span>
          </div>
        </li>

        <li class="clearFix">
          <b>性别</b>
          <div class="fr sex">
            <i class="man" v-if="people.gender == '0' || people.gender == 2"  v-on:click="saveGender(1)"></i> <i class="man-active" v-if="people.gender == 1" v-on:click="saveGender(1)"></i> <span>男</span>
            <i class="woman" v-if="people.gender == '0' || people.gender == 1" v-on:click="saveGender(2)"></i> <i class="woman-active" v-if="people.gender == 2" v-on:click="saveGender(2)"></i><span>女</span>
            <!--<label>男<input type="radio" v-model="gender" value="男"/></label>-->
            <!--<label>女<input type="radio" v-model="gender" value="女"/></label>-->
            <!--{{gender}}-->
          </div>
        </li>

        <li class="clearFix">
          <b>生日</b>
          <span @click="open('picker2')" class="date-time">{{people.brith||"未填写"}}</span>
          <!--<mt-button @click.native="open('picker2')" size="large">点击弹出 Date Picker</mt-button>-->
        </li>
        <li class="clearFix" @click = "gotoAddress('/me/signname')">
          <b>个性签名</b>
          <div class="fr">
            <span class="no-sign">{{people.signature||"未填写"}}</span>
            <!--<span class="sign">-->
              <!--未填写未填写未填写未填写未填写未填写未填写-->
            <!--</span>-->
            <span class="ico-r"></span>
          </div>
        </li>
        <li class="clearFix" @click = "gotoAddress('/me/address')">
          <b>我的地址</b>
          <div class="fr">
            <!--<span class="no-address">未填写</span>-->
            <span class="address">
              {{address||"未填写"}}
            </span>
            <span class="ico-r"></span>
          </div>

        </li>
      </ul>

      <div class="next-btn">
        <mt-button type="danger" size="large" v-on:click="save">保存</mt-button>
      </div>


    </div>

    <mt-datetime-picker

      ref="picker2"
      type="date"
      v-model="value2"
      :startDate="startDate"
      :endDate="endDate"
      @confirm="handleChange">
    </mt-datetime-picker>

  </div>
</template>

<script>
import {Toast} from 'mint-ui';
import {Indicator} from 'mint-ui';

export default {
  name: 'People',
  data () {
    return {
      msg: 'message',
      value2: null,
      startDate:new Date('1960-01-01'),
      endDate:new Date(),
      people:{},
      gender:'',
      address:'',
      photoUrl:'http://api.piver.cn/image/users/'+(sessionStorage.user && JSON.parse(sessionStorage.user).customer_id)+'.jpg?v='+Math.random()

    }
  },
  methods: {
    open(picker) {
      this.$refs[picker].open();
    },
    gotoAddress(path){
      this.$router.push(path)
    },
    handleChange(value) {

      value = dateFormat(value, "yyyy-mm-dd");

      var ajaxData = {};
      ajaxData.brith = value;
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.accountEdit,
        data: ajaxData,
        success:function(res){
          if(res.code == 200){

            Toast('生日修改成功');
            _this.people.brith = value;
          }
          else{
            //Toast(res.msg)
          }
        }
      })

    },
    initData:function(){
      var  ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;

      var _this=this;
      $.ajax({
        type:'post',
        url: RouteMap.peopleDetail,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            _this.people = res.data;

            console.log(res.data)
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    getAddress(){
      var getAddressData = {};
      getAddressData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.getAddress,
        data:getAddressData,
        success:function(res){
          if(res.code == 200){
            if(Object.keys(res.data.addresses).length>0){
              var i=0;
              for(var key in res.data.addresses){
                if(i>0){
                  return;
                }
                var defaultAddress = res.data.addresses[key];
                _this.address = defaultAddress.city_name+'/'+defaultAddress.district_name+'/'+defaultAddress.address;
                i = i+1;
              }
//              console.log(_this.addresses);

            }
            else{
              _this.address = '';
            }
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    saveName(name){

      var ajaxData = {};
      ajaxData.firstname = this.people.firstname;
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.accountEdit,
        data: ajaxData,
        success:function(res){
          if(res.code == 200){

            Toast('用户姓名修改成功');

          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    saveGender(num){

      var ajaxData = {};
      ajaxData.gender = num;
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.accountEdit,
        data: ajaxData,
        success:function(res){
          if(res.code == 200){

            Toast('性别修改成功');
            _this.people.gender = num;
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    save:function(){
      Toast('保存成功');
    }

  },
  mounted: function(){
    this.initData();
    this.getAddress();
    var _this = this;
    $('body').on('blur','#userName',function(){

      _this.saveName();

    });

    $('#photoImgUpload').on('change',function(){

      var _this = this;

      var formData = new FormData($('form')[0]);
//      console.log(formData.avatar);
      Indicator.open({
        text: "图片上传中...",
        spinnerType: 'fading-circle'
      });

      $.ajax({
          url: RouteMap.photoupload+'&token='+(sessionStorage.user && JSON.parse(sessionStorage.user).token),
          type: 'POST',
          data: formData,
          cache: false,
          contentType: false,
          processData: false
        })
        .done(function(res) {

          if(res.code == 200){



            var newImg = new Image();

            newImg.src = res.data.avatar+'?v='+Math.random();
            newImg.onload = function(){

              Indicator.close();
              Toast('上传成功')
            }
            newImg.onerror = function(){
              Indicator.close();
            }

//            _this.photoUrl = res.data.avatar;
            $('.icon').attr('src',newImg.src);


          }
          else{
            //Toast(res.msg)
            Indicator.close();
            return;
          }

        }).fail(function(res) {
        Indicator.close();
        Toast('头像上传失败')
      });
    })
  }





}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .photo-box{
    display: inline-block;
    width:3rem;
    height: 3rem;
    position: relative;
    margin-left: 2rem;
  }
  .photo-box input{
    position: absolute;
    width:5rem;
    height: 3rem;
    top:0;
    left: 0;
    z-index: 11;
    opacity: 0.0000001;
  }
.me-box{
  font-size: 0.56rem;
  padding:0 2.5rem;
}
.list {
  background:#fff;
  width:100%;
  box-sizing:border-box;
  margin-top:.3rem;
}
.date-time{
  float: right;
}

.head {
  line-height:3rem;
  padding:1.5rem 1rem 2.4rem;
  border-bottom:1px solid #c1c1c1;
}
.head b{
    float:left;
    color:#1c1c1c;
    font-weight:normal;
}

.head .icon{
    border-radius:50%;
    width:3rem;
    height:3rem;
}

.my-list .fr{
  width: 8rem;
  text-align: right;
}
.list li{
    border-bottom:1px solid #c1c1c1;
    line-height:2rem;
}

.list li a{
    float:left;
    color:#1c1c1c;
}
.list li b{
    color:#1c1c1c;
    float:left;
    font-weight: normal;
    width: 3rem;
}
.list li .ico-r{

    color:#aaa;
    float:right;
}
.list .name{
  text-align: right;
  width: 7rem;
}
.btn2{
    background:#aaa;
    width:50%;
    height:2rem;
    text-align:center;
    margin-left:25%;
    margin-top:2rem;
    border-radius:.3rem;
}
.ico-r{
  display: inline-block;
  width: 0.3rem;
  height: 0.4rem;
  background: url("../../assets/me/ico.png");
  background-size: 100% 100%;
  margin-top: 1rem;

}
  .man{
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: url("../../assets/me/man.png");
    background-size: 100% 100%;
  }
  .man-active{
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: url("../../assets/me/man-active.png");
    background-size: 100% 100%;
  }


.woman{
    display: inline-block;
    width: 0.4rem;
    height: 0.52rem;
    background: url("../../assets/me/woman.png");
    background-size: 100% 100%;
    margin-left: 0.5rem;
  }
.woman-active{
  display: inline-block;
  width: 0.4rem;
  height: 0.52rem;
  background: url("../../assets/me/woman-active.png");
  background-size: 100% 100%;
  margin-left: 0.5rem;
}
  .sex{
    text-align: right;
  }
  .sex span{
    margin-left: 0.2rem;
  }
  .no-sign{
    display: inline-block;
    width: 7.2rem;
    text-align: right;
    line-height: 1rem;
    margin-top:.5rem;
  }
  .sign{
    display: inline-block;
    text-align: left;
    line-height: 1rem;
    width: 7rem;
    margin-top: 0.5rem;
  }
  .my-list .ico-r{
    margin-top: 0.8rem;
    margin-left: 0.4rem;
  }
  .address{
    display: inline-block;
    text-align: left;
    line-height: 1rem;
    width: 7.2rem;
    margin-top: 0.5rem;
  }

.next-btn{
  padding: 0;
}

</style>
